<template>
  <div class="select">
    <a-select
      v-model:value="selectValue"
      :disabled="disabled"
      style="width: 100%"
      :placeholder="placeholder"
      ref="orgSelect"
      filter
      :options="options"
      :fieldNames="fieldNames"
      :filter-option="filterOption"
      :size="size"
      :dropdownClassName="className"
      show-search
      allowClear
      @change="handleChange"
    ></a-select>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch, unref } from "vue";
import { defHttp } from "/@/utils/http/axios";
type TypeList =
  | "GGLX"
  | "upload"
  | "invoicetype"
  | "customerName"
  | "employeeName"
  | "rate"
  | "role";

enum typeFunc {
  upload = "files/upload/image", //上传图片
  GGLX = "key-values/Select/GGLX", //上传图片
  invoicetype = "key-values/Select/invoicetype", // 发票类型
  customerName = "api/Customer/getDictCode", // 单位
  employeeName = "api/Employee/getDictCode", // 人员
  rate = "key-values/Select/rate", // 税率
  role = "Roles", // 角色
}

export default defineComponent({
  name: "rw_select",
  props: {
    addUrl: {
      type: Boolean,
      default: false,
    },
    className: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: "org",
    },
    label: {
      type: String,
      default: "name",
    },
    keyValue: {
      type: String,
      default: "id",
    },
    value: {
      type: String,
      default: "",
    },
    size: {
      type: String,
      default: "Middle",
    },
    placeholder: {
      type: String,
      default: "请选择",
    },
    watchParams: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    afterEcah: {
      type: Function,
    },
    changeHandler: {
      type: Function,
    },
    method: {
      type: String,
      default: "get",
    },
    xhrParams: {
      type: Object,
      default: () => {
        return {
          data: "entities",
          pageIndex: 1,
          pageSize: 100,
        };
      },
    },
  },
  setup(props, context) {
    const selectValue = ref<string | number>();
    const {
      type,
      xhrParams,
      label,
      keyValue,
      watchParams,
      disabled,
      afterEcah,
      changeHandler,
      method,
      addUrl,
    } = props;
    const options = ref([]);
    const orgSelect = ref(null);
    const fieldNames = {
      label,
      value: keyValue,
    };
    watch(
      () => props.value,
      (n) => {
        if (n) {
          selectValue.value = n + "";
        } else {
          selectValue.value = "";
        }
      }
    );
    if (watchParams) {
      watch(
        () => props.xhrParams[watchParams],
        (n) => {
          if (n) {
            xhrParams[watchParams] = n;
            getselectList(type as TypeList);
          }
        },
        {
          deep: true,
        }
      );
    }

    const handleChange = (value: string) => {
      context.emit("input", value);
      context.emit("change", value);
      let r;
      if (type == "product") {
        r = options.value.find((item) => {
          return item.proCode == value;
        });
      } else {
        r = options.value.find((item) => {
          return item.binderId == value;
        });
      }
      if (r) {
        changeHandler && changeHandler(unref(r));
      } else {
        changeHandler && changeHandler(value);
      }
    };

    // 根据type不同调用不同的接口
    const getselectList = (type: TypeList) => {
      let url = typeFunc[type];
      let options = {};
      if (method == "get") {
        options = {
          params: xhrParams,
        };
      } else {
        options = {
          data: xhrParams,
        };
      }
      if (addUrl) {
        defHttp[method]({ url: url + "/" + props.xhrParams[watchParams] }).then((res) => {
          if (xhrParams.data == "entities") {
            formatList(res.data.entities);
          } else {
            formatList(res.data);
          }
          context.emit("loadList", options.value);
        });
      } else {
        defHttp[method]({ url, ...options }).then((res) => {
          if (xhrParams.data == "entities") {
            formatList(res.data.entities);
          } else {
            formatList(res.data);
          }
          context.emit("loadList", options.value);
        });
      }
    };
    const formatList = (list): [] => {
      if (typeof afterEcah == "function") {
        options.value = afterEcah(list);
      } else {
        options.value = list;
      }
      if (type == "ward" && !selectValue.value) {
        selectValue.value = list[0]?.id;
        context.emit("input", selectValue.value);
        context.emit("change", selectValue.value);
      }
    };
    const filterOption = (input: string, option: any) => {
      let name = option.name;
      if (type == "device" || type == "bindDevice") {
        name = option.code;
      }
      return name.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    };
    getselectList(type as TypeList);
    return {
      selectValue,
      fieldNames,
      options,
      orgSelect,
      disabled,
      handleChange,
      filterOption,
    };
  },
});
</script>
